<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" class="page-breadcrumb">
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>组织管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
            <div
                style="float:left;width:200px;border:1px solid #EBEEF5;"
                class="left-tree-content"
                v-loading="false"
            >
                <el-input
                    class="search-input"
                    placeholder="搜索"
                    size="small"
                    v-model="searchTxt"
                    @keyup.enter.native="onSearch"
                >
                    <i v-show="loadingSearch" class="el-input__icon el-icon-loading" slot="suffix" />
                </el-input>
                <div
                    style="width:200px;overflow:auto;height:calc(100vh - 128px);"
                    v-loading="loadingInitTree"
                >
                    <el-tree
                        v-if="showTree"
                        ref="deptTree"
                        style="margin-top:10px;"
                        node-key="id"
                        :data="treeData"
                        :default-expand-all="searchMode"
                        :expand-on-click-node="false"
                        @node-click="handleNodeClick"
                        :load="!this.searchMode ? loadDeptTree : null"
                        :lazy="!this.searchMode"
                        :render-content="renderContent"
                        :highlight-current="true"
                        :props="{children: 'children', isLeaf:isLeaf}"
                    ></el-tree>
                </div>
            </div>
            <div
                style="float:left;width:calc(100% - 202px);height:calc(100vh - 94px);overflow:auto;"
            >
                <el-collapse v-model="activeContentTabNames" @change="handleTabChange">
                    <el-collapse-item name="1">
                        <template slot="title">
                            <span style="margin-left:20px;">
                                <strong>基本信息</strong>
                            </span>
                        </template>
                        <div style="margin-top:20px;" v-loading="loadingDetail">
                            <el-form
                                v-if="deptData"
                                :model="formDeptData"
                                size="small"
                                ref="deptForm"
                                :rules="editMode?rules:{}"
                            >
                                <el-row>
                                    <el-col :span="18">
                                        <el-breadcrumb
                                            separator-class="el-icon-arrow-right"
                                            style="margin-left:60px;"
                                        >
                                            <el-breadcrumb-item
                                                v-for="(item, index) in deptData.deptTreeList"
                                                :key="index"
                                            >
                                                <el-tag
                                                    type="info"
                                                    effect="dark"
                                                    size="small"
                                                >{{item.abbreviation}}</el-tag>
                                            </el-breadcrumb-item>
                                        </el-breadcrumb>
                                    </el-col>
                                    <el-col :span="6" style="text-align:right;padding-right:20px;">
                                        <el-button
                                            v-if="authMap['xzbjzz']"
                                            style="margin-left:20px;"
                                            type="text"
                                            @click="editMode = true"
                                            :disabled="editMode"
                                            icon="el-icon-edit-outline"
                                        >编辑</el-button>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12"></el-col>
                                    <el-col :span="12"></el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="名称："
                                            label-width="160px"
                                            prop="abbreviation"
                                        >
                                            <span v-if="!editMode">{{deptData.abbreviation}}</span>
                                            <el-input
                                                v-if="editMode"
                                                v-model="formDeptData.abbreviation"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="全称：" label-width="160px" prop="name">
                                            <span v-if="!editMode">{{deptData.name}}</span>
                                            <el-input v-if="editMode" v-model="formDeptData.name"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="组织后缀："
                                            label-width="160px"
                                            prop="suffix"
                                        >
                                            <span v-if="!editMode">{{deptData.suffix}}</span>
                                            <el-input v-if="editMode" v-model="formDeptData.suffix"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="状态：" label-width="160px" prop="state">
                                            <span v-if="!editMode">
                                                <el-tag effect="plain" v-if="deptData.state===1">正常</el-tag>
                                                <el-tag
                                                    effect="plain"
                                                    type="danger"
                                                    v-if="deptData.state===2"
                                                >废弃</el-tag>
                                            </span>
                                            <el-radio-group
                                                v-model="formDeptData.state"
                                                v-if="editMode"
                                            >
                                                <el-radio :label="1">正常</el-radio>
                                                <el-radio :label="2">废弃</el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item label="组织类型：" label-width="160px" prop="type">
                                            <span v-if="!editMode">
                                                <template v-if="deptData.type===1">区域</template>
                                                <template v-else-if="deptData.type===2">单位</template>
                                                <template v-else-if="deptData.type===3">乡镇街道</template>
                                                <template v-else-if="deptData.type===4">分类</template>
                                                <template v-else-if="deptData.type===5">村、社区</template>
                                                <template v-else-if="deptData.type===6">部门/科室</template>
                                                <template v-else-if="deptData.type===7">下属单位</template>
                                                <template v-else-if="deptData.type===8">虚拟组织</template>
                                                <template v-else-if="deptData.type===9">网格单元</template>
                                                <template v-else></template>
                                            </span>
                                            <el-select
                                                v-if="editMode"
                                                v-model="formDeptData.type"
                                                style="width:100%;"
                                            >
                                                <template v-if="deptData.parentType===1">
                                                    <el-option label="区域" :value="1"></el-option>
                                                    <el-option label="单位" :value="2"></el-option>
                                                    <el-option label="乡镇街道" :value="3"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===2">
                                                    <el-option label="部门/科室" :value="6"></el-option>
                                                    <el-option label="下属单位" :value="7"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===3">
                                                    <el-option label="部门/科室" :value="6"></el-option>
                                                    <el-option label="村、社区" :value="5"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===4">
                                                    <el-option label="区域" :value="1"></el-option>
                                                    <el-option label="单位" :value="2"></el-option>
                                                    <el-option label="乡镇街道" :value="3"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===5">
                                                    <el-option label="网格单元" :value="9"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===6">
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===7">
                                                    <el-option label="部门/科室" :value="6"></el-option>
                                                    <el-option label="下属单位" :value="7"></el-option>
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===8">
                                                    <el-option label="虚拟组织" :value="8"></el-option>
                                                </template>
                                                <template v-else-if="deptData.parentType===9"></template>
                                                <template v-else>
                                                    <el-option label="区域" :value="1"></el-option>
                                                </template>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="行政级别："
                                            label-width="160px"
                                            prop="clazz"
                                        >
                                            <span v-if="!editMode">
                                                <template v-if="deptData.clazz===3">省级</template>
                                                <template v-else-if="deptData.clazz===4">市级</template>
                                                <template v-else-if="deptData.clazz===5">县级</template>
                                                <template v-else-if="deptData.clazz===6">乡镇街道</template>
                                                <template v-else-if="deptData.clazz===7">村、社区</template>
                                                <template v-else-if="deptData.clazz===8">网格</template>
                                            </span>

                                            <el-select
                                                v-if="editMode"
                                                v-model="formDeptData.clazz"
                                                style="width:100%;"
                                            >
                                                <el-option label="省级" :value="3"></el-option>
                                                <el-option label="市级" :value="4"></el-option>
                                                <el-option label="县级" :value="5"></el-option>
                                                <el-option label="乡镇街道" :value="6"></el-option>
                                                <el-option label="村、社区" :value="7"></el-option>
                                                <el-option label="网格" :value="8"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="组织唯一编码："
                                            label-width="160px"
                                            prop="code"
                                        >
                                            <span v-if="!editMode">{{deptData.code}}</span>
                                            <el-input v-if="editMode" v-model="formDeptData.code"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="统一社会信用代码："
                                            label-width="160px"
                                            prop="uniscid"
                                        >
                                            <span v-if="!editMode">{{deptData.uniscid}}</span>
                                            <el-input
                                                v-if="editMode"
                                                v-model="formDeptData.uniscid"
                                            ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12"></el-col>
                                    <el-col :span="12">
                                        <el-form-item label="排序：" label-width="160px">
                                            <span v-if="!editMode">{{deptData.sort}}</span>
                                            <el-input v-if="editMode" v-model="formDeptData.sort"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="创建时间："
                                            label-width="160px"
                                        >{{deptData.createTime}}</el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item
                                            label="更新时间："
                                            label-width="160px"
                                        >{{deptData.updateTime}}</el-form-item>
                                    </el-col>
                                </el-row>
                                <el-form-item style="text-align:center;">
                                    <el-button
                                        v-if="editMode"
                                        style="margin-left:20px;"
                                        type="primary"
                                        @click="onUpdateDept"
                                        :loading="loadingSubmit"
                                    >保存</el-button>
                                    <el-button
                                        v-if="editMode"
                                        style="margin-left:20px;"
                                        type="default"
                                        @click="editMode = false"
                                    >取消</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="2">
                        <template slot="title">
                            <span style="margin-left:20px;">
                                <strong>下属组织</strong>
                            </span>
                        </template>
                        <div style="margin:20px 20px 0 20px;" v-if="queryForm.deptId">
                            <el-form v-if="authMap['xzbjzz']" :inline="true" size="small">
                                <el-form-item>
                                    <el-button
                                        v-if="authMap['xzbjzz']"
                                        type="default"
                                        @click="onAdd"
                                        icon="el-icon-plus"
                                    >新建组织</el-button>
                                </el-form-item>
                            </el-form>
                            <table-ex
                                ref="tableSubEx"
                                :queryCallback="querySubCallback"
                                :sizeSel="false"
                            >
                                <el-table-column label="组织名称" min-width="150">
                                    <template slot-scope="scope">
                                        <span>{{scope.row.abbreviation}}</span>
                                        <el-tag
                                            style="margin-left:5px;"
                                            size="small"
                                            effect="plain"
                                            type="danger"
                                            v-if="scope.row.state===2"
                                        >废弃</el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="name" label="组织全称" min-width="250"></el-table-column>
                                <el-table-column prop="suffix" label="组织后缀" width="100"></el-table-column>
                                <el-table-column label="组织类型" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.type===1">区域</span>
                                        <span v-else-if="scope.row.type===2">单位</span>
                                        <span v-else-if="scope.row.type===3">乡镇街道</span>
                                        <span v-else-if="scope.row.type===4">分类</span>
                                        <span v-else-if="scope.row.type===5">村、社区</span>
                                        <span v-else-if="scope.row.type===6">部门/科室</span>
                                        <span v-else-if="scope.row.type===7">下属单位</span>
                                        <span v-else-if="scope.row.type===8">虚拟组织</span>
                                        <span v-else-if="scope.row.type===9">网格单元</span>
                                        <span v-else></span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="行政级别" width="100">
                                    <template slot-scope="scope">
                                        <span v-if="scope.row.clazz===3">省级</span>
                                        <span v-else-if="scope.row.clazz===4">市级</span>
                                        <span v-else-if="scope.row.clazz===5">县级</span>
                                        <span v-else-if="scope.row.clazz===6">乡镇街道</span>
                                        <span v-else-if="scope.row.clazz===7">村、社区</span>
                                        <span v-else-if="scope.row.clazz===8">网格</span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="code" label="部门唯一编码" width="150"></el-table-column>
                                <el-table-column prop="uniscid" label="统一社会信用代码" width="140"></el-table-column>
                                <el-table-column label="操作" width="80">
                                    <template slot-scope="scope">
                                        <el-button
                                            v-if="authMap['xzbjzz']"
                                            type="danger"
                                            size="mini"
                                            class="button-in-cell"
                                            @click="onDeleteSub(scope.row)"
                                        >删除</el-button>
                                    </template>
                                </el-table-column>
                            </table-ex>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="3">
                        <template slot="title">
                            <span style="margin-left:20px;">
                                <strong>组织管理员</strong>
                            </span>
                        </template>
                        <div style="margin:20px 20px 0 20px;" v-if="queryForm.deptId">
                            <el-form v-if="authMap['xzbjzz']" :inline="true" size="small">
                                <el-form-item>
                                    <el-button
                                        v-if="authMap['xzbjzz']"
                                        type="default"
                                        @click="onAddManager"
                                        icon="el-icon-plus"
                                    >添加管理员</el-button>
                                </el-form-item>
                            </el-form>
                            <table-ex
                                ref="tableManagerEx"
                                :queryCallback="queryManagerCallback"
                                :sizeSel="false"
                            >
                                <el-table-column prop="name" label="用户姓名" min-width="140"></el-table-column>
                                <el-table-column prop="phone" label="手机号码" min-width="120"></el-table-column>
                                <el-table-column prop="idCard" label="证件号" min-width="180"></el-table-column>
                                <el-table-column label="操作" width="80">
                                    <template slot-scope="scope">
                                        <el-button
                                            v-if="authMap['xzbjzz']"
                                            type="danger"
                                            size="mini"
                                            class="button-in-cell"
                                            @click="onDeleteManager(scope.row)"
                                        >删除</el-button>
                                    </template>
                                </el-table-column>
                            </table-ex>
                        </div>
                    </el-collapse-item>
                    <el-collapse-item name="4">
                        <template slot="title">
                            <span style="margin-left:20px;">
                                <strong>组织用户</strong>
                            </span>
                        </template>
                        <div style="margin:20px 20px 0 20px;" v-if="queryForm.deptId">
                            <table-ex
                                ref="tableMemberEx"
                                :queryCallback="queryMemberCallback"
                                :sizeSel="false"
                            >
                                <el-table-column prop="name" label="用户姓名" min-width="140"></el-table-column>
                                <el-table-column prop="phone" label="手机号码" min-width="120"></el-table-column>
                                <el-table-column prop="idCard" label="证件号" min-width="180"></el-table-column>
                            </table-ex>
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
        </div>
        <sys-dept-add
            :show="showAddDialog"
            :success="onAddSuccess"
            :cancel="onAddCancel"
            :parent="deptData"
        ></sys-dept-add>
        <sys-dept-update
            :show="showUpdateDialog"
            :success="onUpdateSuccess"
            :cancel="onUpdateCancel"
            :id="updateId"
        ></sys-dept-update>
        <sys-dept-detail
            :show="showDetailDialog"
            :success="onDetailSuccess"
            :cancel="onDetailCancel"
            :id="detailId"
        ></sys-dept-detail>
        <user-sel-page
            :show="showManagerSelDialog"
            :success="onManagerSelSuccess"
            :cancel="onManagerSelCancel"
        ></user-sel-page>
    </div>
</template>

<script>
import dept_api from '../../api/dept_api'
import SysDeptAdd from './SysDeptAdd.vue'
import SysDeptUpdate from './SysDeptUpdate.vue'
import SysDeptDetail from './SysDeptDetail.vue'
import UserSelPage from '../common/UserSelPage.vue'
import TableEx from '../../components/TableEx.vue'
import { mapState } from 'vuex'

export default {
    components: {
        SysDeptAdd,
        SysDeptUpdate,
        SysDeptDetail,
        UserSelPage,
        TableEx,
    },
    data() {
        return {
            queryForm: {
                deptId: null,
            },
            selectedItems: [],
            showAddDialog: false,
            showUpdateDialog: false,
            showDetailDialog: false,
            showManagerSelDialog: false,
            updateId: null,
            detailId: null,
            loadingSearch: false,
            loadingInitTree: false,
            searchTxt: '',
            treeData: [],
            searchMode: false,
            showTree: true,
            loadingDetail: false,
            activeContentTabNames: ['1', '2', '3', '4'],
            deptData: null,
            formDeptData: {},
            editMode: false,
            loadingSubmit: false,
            rules: {
                abbreviation: [
                    { required: true, message: '请输入组织名称', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '请输入组织全称', trigger: 'blur' }
                ],
                suffix: [
                    { required: true, message: '请输入组织后缀', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择组织类型', trigger: 'change' }
                ],
                clazz: [
                    { required: true, message: '请选择行政级别', trigger: 'change' }
                ],
                code: [
                    { required: true, message: '请输入部门唯一编码', trigger: 'blur' }
                ],
                uniscid: [
                    { required: true, message: '请输入统一社会信用代码', trigger: 'blur' }
                ],
                state: [
                    { required: true, message: '请选择状态', trigger: 'change' }
                ],
            },
            querySubForm: {}
        }
    },
    computed: {
        ...mapState({
            authMap: state => state.auth.authMap
        })
    },
    watch: {
        editMode(val) {
            if (!val) {
                this.$refs.deptForm.resetFields()
            } else {
                this.formDeptData = { ...this.deptData }
            }
        }
    },
    methods: {
        queryCallback(param) {
            return dept_api.findPage({
                query: this.queryForm,
                ...param
            })
        },
        querySubCallback(param) {
            return dept_api.findSubPage({
                query: {
                    ...this.queryForm,
                    parentDeptId: this.queryForm.deptId,
                },
                ...param
            })
        },
        queryManagerCallback(param) {
            return dept_api.findManagerPageData({
                query: this.queryForm,
                ...param
            })
        },
        queryMemberCallback(param) {
            return dept_api.findMemberPageData({
                query: this.queryForm,
                ...param
            })
        },
        onSubQuery(event = null, type = 1) {
            this.$refs.tableSubEx.refresh(type)
        },
        onManagerQuery(event = null, type = 1) {
            this.$refs.tableManagerEx.refresh(type)
        },
        onMemberQuery(event = null, type = 1) {
            this.$refs.tableMemberEx.refresh(type)
        },
        onSelectionChange(items) {
            this.selectedItems = items
        },
        onAdd() {
            this.showAddDialog = true
        },
        onAddSuccess(data) {
            this.showAddDialog = false
            this.onSubQuery()
            this.$refs.deptTree.append(data, this.queryForm.deptId)
        },
        onAddCancel() {
            this.showAddDialog = false
        },
        onUpdate(id) {
            this.updateId = id
            this.showUpdateDialog = true
        },
        onUpdateSuccess() {
            this.showUpdateDialog = false
            this.onSubQuery(null, 2)
        },
        onUpdateCancel() {
            this.showUpdateDialog = false
        },
        onDetail(id) {
            this.detailId = id
            this.showDetailDialog = true
        },
        onDetailSuccess() {
            this.showDetailDialog = false
        },
        onDetailCancel() {
            this.showDetailDialog = false
        },
        queryDeptInfo(deptId) {
            this.loadingDetail = true
            return dept_api.get(deptId).then(data => {
                this.deptData = data
                this.deptData.deptTreeList = this.getCurrentLinelyTreeList()
                this.loadingDetail = false
            }).catch(err => {
                this.$message.error(err.message)
                this.loadingDetail = false
            })
        },
        getCurrentLinelyTreeList() {
            let r = []
            let n = { data: this.$refs.deptTree.getCurrentNode() }
            while (n && n.data) {
                r.unshift(n.data)
                n = this.$refs.deptTree.getNode({ id: n.data.parentId })
            }
            return r
        },
        reloadContent(deptId) {
            this.editMode = false
            this.queryDeptInfo(deptId)
            this.$refs.tableSubEx.refresh(1)
            this.$refs.tableManagerEx.refresh(1)
            this.$refs.tableMemberEx.refresh(1)
        },
        handleNodeClick(data) {
            this.queryForm.deptId = data.id
            this.$nextTick(() => {
                this.reloadContent(this.queryForm.deptId)
            })
        },
        renderContent(h, { node, data, store }) {
            return (
                <span class="el-tree-node__label">
                    <div>
                        {data.state !== 2 ? <span>{data.abbreviation}</span> : ''}
                        {data.state === 2 ? <span style="color:#f56c6c">{data.abbreviation}</span> : ''}
                        {data.state === 2 ? <el-tag effect="plain" type="danger" size="mini" style="margin-left:5px;">废弃</el-tag> : ''}
                        {data.subCount > 0 ? <el-tag effect="plain" type="info" size="mini" style="margin-left:5px;">{data.subCount}</el-tag> : ''}
                    </div>
                </span>)
        },
        loadDeptTree(node, callback) {
            dept_api.listSubDept(node.data ? node.data.id : null).then(data => {
                callback(data)
            })
        },
        initTree(load) {
            if (load) {
                this.loadDeptTree(null, data => {
                    data.forEach(d => d.expand = false)
                    this.treeData = data
                })
            }
        },
        initData(data) {
            this.treeData = this.listToTree(data)
        },
        listToTree(l) {
            let result = []
            let m = new Map()
            l.forEach(d => {
                if (!m.has(d.parentId)) {
                    m.set(d.parentId, [])
                }
                m.get(d.parentId).push(d)
            })
            l.forEach(d => {
                d.children = m.get(d.id)
                m.delete(d.id)
            })
            m.forEach((v, k) => {
                v.forEach(d => result.push(d))
            })
            return result
        },
        delayDataFilter(data) {
            data.forEach(e => {
                e.expand = null
                if (this.isLeaf(e)) {
                    e.loading = false
                    e.children = []
                } else {
                    delete e.loading
                    delete e.children
                }
            })
            return data
        },
        isLeaf(e) {
            return (!e.children || e.children.length <= 0) && (!e.subCount || e.subCount <= 0)
        },
        querySubDept(key, callback) {
            dept_api.listSubDept(key).then(data => {
                callback(data)
            })
        },
        queryDept(keyword, callback) {
            dept_api.listDept(keyword).then(data => {
                callback(data)
            })
        },
        onSearch() {
            this.loadingSearch = true
            if (this.searchTxt && this.searchTxt != '') {
                this.queryDept(this.searchTxt, data => {
                    this.searchMode = true
                    this.showTree = false
                    this.$nextTick(() => {
                        this.showTree = true
                        this.initData(data)
                    })
                    this.loadingSearch = false
                })
            } else {
                this.searchMode = false
                this.showTree = false
                this.$nextTick(() => {
                    this.showTree = true
                    this.initTree(false)
                })
                this.loadingSearch = false
            }
        },
        handleTabChange() {
            this.editMode = false
        },
        onUpdateDept() {
            this.$refs.deptForm.validate(valid => {
                if (valid) {
                    this.loadingSubmit = true
                    dept_api.update(this.formDeptData).then(data => {
                        this.editMode = false
                        this.loadingSubmit = false
                        const abbreviation = this.formDeptData.abbreviation
                        const state = this.formDeptData.state
                        this.queryDeptInfo(this.queryForm.deptId).then(data => {
                            let d = this.$refs.deptTree.getNode({ id: this.queryForm.deptId }).data
                            d.abbreviation = abbreviation
                            d.state = state
                        })
                    }).catch(err => {
                        this.$message.error(err.message)
                        this.loadingSubmit = false
                    })
                }
            })
        },
        onDeleteSub(dept) {
            this.$confirm(`<p>删除部门：<strong>${dept.abbreviation}</strong></p><p>同时删除该部门所有下级部门</p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                dept_api.delete(dept.id).then(data => {
                    this.$message.success('删除成功')
                    this.onSubQuery(null, 3)
                    this.$refs.deptTree.remove({ id: dept.id })
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onDeleteManager(manager) {
            this.$confirm(`<p>删除部门管理员：<strong>${manager.name}</strong></p><p>是否继续?</p>`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                dangerouslyUseHTMLString: true,
            }).then(() => {
                dept_api.delManagerBatch(this.queryForm.deptId, [manager.id]).then(data => {
                    this.$message.success('删除成功')
                    this.onManagerQuery(null, 3)
                }).catch(err => {
                    this.$message.error(err.message)
                })
            }).catch(err => {
            })
        },
        onAddManager() {
            this.showManagerSelDialog = true
        },
        onManagerSelSuccess(data) {
            dept_api.addManagerBatch(this.queryForm.deptId, data.map(e => e.id)).then(data => {
                this.$message.success('添加成功')
                this.onManagerQuery()
            }).catch(err => {
                this.$message.error(err.message)
            })
            this.showManagerSelDialog = false
        },
        onManagerSelCancel() {
            this.showManagerSelDialog = false
        },
    }
}
</script>

<style scoped>
.el-tree {
    min-width: 100%;
    display: inline-block !important;
}
</style>

